<include file="Public/head" />
<link type="text/css" rel="stylesheet" href="{:get_style_cdnurl()}paimai/yunying/plugin/select2/select2.css" />
<script src="{:get_style_cdnurl()}paimai/yunying/plugin/select2/select2.js" type="text/javascript"></script>
<style type="text/css">
    .employee .employee_left,.employee_right{width: 50%;float:left;}
    .select2-container .select2-choice > .select2-chosen{text-align: center;}
</style>
</head>
<body>
<include file="Public/common_header" />
<div class="mian">
    <include file="Public/sidebar" menu='xtgl.gysgl' />
    <div class="mianR">
        <h3 class='cha'>片区管理-关联维护人</h3>
        <div class="associated-store clearfix">
            <div class="associated-left">
                <h5>维护人</h5>
                <div class="store-search"><input type="text" value="" id="text" placeholder="请输入关键字" /><input type="button" id="search" value="搜索" /></div>
                <ul class="associated-first">
                    <?php foreach ($notInMaintain as $key => $value): ?>
                        <li id="{$value.emp_id}">
                            <?php if ($value['region_id'] > 0): ?>
                                <i>{$value.region_name}</i>
                            <?php else: ?>
                                <i class="add-btn">添加</i>
                            <?php endif ?>
                            
                            <span class="renew">{$value.real_name}（{$value.count}）</span><em>{$value.username}</em>
                        </li>
                    <?php endforeach ?>
                    
                    
                </ul>
                <ul class="associated-last"></ul>
            </div>
            <div class="associated-right">
                <h5>已添加到片区</h5>
                <ul id="eidtMid">
                    <?php foreach ($inMaintain as $k => $v): ?>
                        <?php if ($v['emp_id'] == $regionInfo['leader']): ?>
                            <li id="{$v.emp_id}"><span class='renew'>{$v.real_name}（{$v.count}）</span><em>{$v.username}</em></li>
                        <?php else: ?>  
                            <li id="{$v.emp_id}"><span class='renew'>{$v.real_name}（{$v.count}）</span><em>{$v.username}</em><i class="delete-btn">删除</i></li>
                        <?php endif ?>
                    <?php endforeach ?>
  
                </ul>
            </div>
        </div>
        <input type="hidden" value="" id="maintains">
        <div class="yongBtn">
            <input type="button" value="确认" onclick="makeSure()" name="queding" class="queding">
            <input type="button" onclick="cancel()" class="quxiao" value="取消">
            <!-- <input type="button" value="确认" name="queding" class="queding">
            <input type="button" onclick="history.go(-1)" class="quxiao" value="取消">             -->
        </div>
    </div>
</div>
<script type="text/javascript">
$(function(){
    $(".associated-last").hide();
    var oLH=$(".associated-first li").outerHeight(true);
    
    if(($(".associated-first li").length)*oLH>320){
        $(".associated-first").css("overflow-y","scroll");
    }else{
        $(".associated-first").css("overflow-y","auto");
    }
    var oLH1=$(".associated-last li").outerHeight(true);
    if(($(".associated-last li").length)*oLH1>320){
        $(".associated-last").css("overflow-y","scroll");
    }else{
        $(".associated-last").css("overflow-y","auto");
    }
    var oLH2=$(".associated-right ul li").outerHeight(true);
    if(($(".associated-right ul li").length)*oLH2>350){
        $(".associated-right ul").css("overflow-y","scroll");
    }else{
        $(".associated-right ul").css("overflow-y","auto");
    }
    //点击搜索获取输入框的内容与下面的li里的内容匹配，匹配好的li插入
    //associated-last.ul里面并且显示，associated-first.ul隐藏
    $("#search").on("click",function(){
        if($("#text").val()==""){
            $(".associated-first").show()
            $(".associated-last").hide();
            $(".associated-first").prepend($(".associated-last").html());
        }else{
            $("#text").css("border","solid 1px #ccc");
            var oText=$("#text").val();
            var oSpan=$(".associated-left ul li span");
            $(".associated-last").html("");
            for(var i=0;i<oSpan.length;i++){
                if($(oSpan[i]).html().indexOf(oText)!=-1){      
                    var oLi=$(oSpan[i]).parent("li");
                    $(".associated-first").hide()
                    $(".associated-last").show();
                    $(".associated-last").append(oLi);
                }
                
            }
        }
    })
    $(".associated-first").on("click","li i.add-btn",function(){
        var oS=$(this).parent("li").find("span").html();
        var oE=$(this).parent("li").find("em").html();
        var iD=$(this).parent("li").attr("id");
        $(this).parent("li").remove();
        $(".associated-right ul").prepend("<li id="+iD+"><span class='renew'>"+oS+"</span><em>"+oE+"</em><i class='delete-btn'>删除</i></li>");
        if(($(".associated-first li").length)*oLH>320){
        $(".associated-first").css("overflow-y","scroll");
        }else{
            $(".associated-first").css("overflow-y","auto");
        }
    })
    
    $(".associated-last").on("click","li i.add-btn",function(){
        var oS=$(this).parent("li").find("span").html();
        var oE=$(this).parent("li").find("em").html();
        var iD=$(this).parent("li").attr("id");
        $(this).parent("li").remove();  
        $(".associated-right ul").prepend("<li id="+iD+"><span class='renew'>"+oS+"</span><em>"+oE+"</em><i class='delete-btn'>删除</i></li>");
        if(($(".associated-first li").length)*oLH>320){
        $(".associated-first").css("overflow-y","scroll");
        }else{
            $(".associated-first").css("overflow-y","auto");
        }
    })
    
    $(".associated-right ul").on("click","li i.delete-btn",function(){
        var oS1=$(this).parent("li").find("span").html();
        var oE1=$(this).parent("li").find("em").html();
        var iD1=$(this).parent("li").attr("id");
        $(this).parent("li").remove();  
        if($(".associated-first").css("display")=="none"){
            $(".associated-last").prepend("<li id="+iD1+"><span class='renew'>"+oS1+"</span><em>"+oE1+"</em><i class='add-btn'>添加</i>"+"</li")
        }
        if($(".associated-last").css("display")=="none"){
            $(".associated-first").prepend("<li id="+iD1+"><span class='renew'>"+oS1+"</span><em>"+oE1+"</em><i class='add-btn'>添加</i>"+"</li")
        }
    })
})

// $(".queding").click(function(){
    
// });

function makeSure(){
    var param = {};
    var arr = [];
    $("#eidtMid li").each(function(){
        arr.push($(this).attr('id'));
    });
    param.maintainIds = arr;
    $(".queding").attr("disabled","disabled");
    $.post("/SupplierManage/regionRelationMaintainPost/rid/{$regionInfo.rid}",param,function(data){
        if(data.code!=200){
            shibai_alert(data.msg,2000)
            $(".queding").removeAttr("disabled").removeAttr("style");
        }else{
            btn_alert("更新成功",1500,function(){
            location.href = '/SupplierManage/index/status/4';
        })
        }
    },"json");
}

var arr1=[];
var arr3 = new Array(); 
$("#eidtMid li").each(function(){
    arr1.push($(this).attr('id'));
});
var cancel1=arr1.sort().toString();
$('#maintains').val(cancel1);
function cancel(){
    var arr2=[];
    $("#eidtMid li").each(function(){
        arr2.push($(this).attr('id'));
    });
    var cance2=arr2.sort().toString();
    var cancel = $("#maintains").val();
    if(cancel!=cance2){
        $(".yunBei").css("display","block");
        confirm_alert("您已对数据进行了修改,是否需要保存!");
    }else{
        location.href = '/SupplierManage/index/status/4';
    }

}

$("body").on('click','.cancel',function(){
    location.href = '/SupplierManage/index/status/4';
})
    
$("body").on('click','.determine',function(){
    colse_hide();
    makeSure();
})
</script>
<include file="Public/foot" />